@import '../../style/public.scss';

// 抽象通用样式
@mixin textEllipsis {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

// 按钮交互效果
@mixin buttonInteraction {
	transition: $custom_transition;
	position: relative;

	&:hover {
		color: $color_main;
		transform: scale(1.1);
	}

	&:active {
		transform: scale(0.95);
	}

	&::after {
		content: '';
		position: absolute;
		top: 50%;
		left: 50%;
		width: 0;
		height: 0;
		background-color: rgba($color_main, 0.1);
		border-radius: 50%;
		transform: translate(-50%, -50%);
		opacity: 0;
		transition: width 0.3s ease, height 0.3s ease, opacity 0.3s ease;
	}

	&:active::after {
		width: 35px;
		height: 35px;
		opacity: 1;
	}
}
// 点击动画
@keyframes buttonClick {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(0.92);
    }
    100% {
        transform: scale(1);
    }
}
.animate-click {
    animation: buttonClick 0.3s ease;
}


.VideoPlayer_container {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	height: 100%;
	overflow: hidden;
	// background-color: black;
	.VideoPlayer_diaplay_container {
		flex: 1 1 auto;
		width: 100%;
		// 限制显示区域高度，留出足够空间给控制器
		max-height: calc(100% - 100px); // 100px是控制器的高度
		position: relative;
		overflow: hidden;
		// background-color: black;
		display: flex; // 添加flex布局
        align-items: center; // 垂直居中
        justify-content: center; // 水平居中
		.VideoPlayer_video_element{
			width: 100%;
			height: 100%;
			// object-fit: contain;
			// object-fit: cover;
			// background-color: black;
			display: block;
		}

		// 无视频时的占位符样式
        .no-video-placeholder {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: #666;
            background-color: #f5f5f5;
            
            p {
                margin: 0;
                font-size: 16px;
            }
        }
	}

	.VideoPlayer_controller_outer_container {
		width: 100%;
		flex: 0 0 100px;
		border-top: 1px solid #e5e7eb;
		border-bottom: 1px solid #e5e7eb;
		// background-color: pink;
		display: grid;
		// 播放控制器三列控制
		grid-template-columns: 240px 1fr 100px;
		align-items: center;

		.VideoPlayer_info_container {
			display: grid;
			grid-template-columns: 100px 1fr;
			grid-template-rows: 50% 50%;
			gap: 5px 0;
			// background-color: red;
			align-items: center;

			.VideoPlayer_info_cover_container {
				@include flexCenter;
				grid-column: 1/2;
				grid-row: 1/3;
				overflow: hidden;

				&>img {
					width: 70%;
					height: auto;
					border-radius: $borderRadius;
					user-select: none;
					pointer-events: none;
					-webkit-user-drag: none;
				}
			}
		}

		.VideoPlayer_controller_container {
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding: 0 $sidePadding;

			.VideoPlayer_controller_buttons {
				@include flexCenter;
				gap: 20px;
				margin-bottom: 10px;

				.VideoPlayer_control_button {
					background: none;
					border: none;
					cursor: pointer;
					@include flexCenter;
					color: #333;
					@include buttonInteraction;

					&.play_button {
						width: 40px;
						height: 40px;
						border-radius: 50%;
						background-color: $color_main;
						color: white;

						&:hover {
							background-color: darken($color_main, 10%);
							transform: scale(1.08);
							box-shadow: 0 2px 8px rgba($color_main, 0.4);
						}

						&:active {
							transform: scale(0.95);
							box-shadow: 0 1px 3px rgba($color_main, 0.3);
						}

						&::after {
							background-color: rgba(white, 0.2);
						}
					}
				}

				.VideoPlayer_volume_container {
					position: relative;
					@include flexCenter;

					.VideoPlayer_volume_slider_container {
						position: absolute;
						bottom: 100%;
						left: 50%;
						transform: translateX(-50%) translateY(10px);
						background-color: white;
						border-radius: 12px;
						padding: 8px 6px;
						box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
						z-index: 10;
						opacity: 0;
						visibility: hidden;
						transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;

						&.show {
							opacity: 1;
							visibility: visible;
							transform: translateX(-50%) translateY(0);
						}

						&::after {
							content: '';
							position: absolute;
							bottom: -4px;
							left: 50%;
							transform: translateX(-50%) rotate(45deg);
							width: 8px;
							height: 8px;
							background-color: white;
							box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.03);
						}

						.VideoPlayer_volume_slider {
							-webkit-appearance: none;
							width: 80px;
							height: 3px;
							border-radius: 2px;
							outline: none;
							background: linear-gradient(to right,
									$color_main 0%,
									$color_main var(--volume-percentage),
									#e5e7eb var(--volume-percentage),
									#e5e7eb 100%);

							&::-webkit-slider-thumb {
								-webkit-appearance: none;
								appearance: none;
								width: 10px;
								height: 10px;
								border-radius: 50%;
								background: white;
								border: 1px solid $color_main;
								cursor: pointer;
								transition: all 0.15s ease;

								&:hover {
									transform: scale(1.2);
									box-shadow: 0 0 3px rgba($color_main, 0.4);
								}
							}

							&::-moz-range-thumb {
								width: 10px;
								height: 10px;
								border-radius: 50%;
								background: white;
								border: 1px solid $color_main;
								cursor: pointer;
								transition: all 0.15s ease;

								&:hover {
									transform: scale(1.2);
									box-shadow: 0 0 3px rgba($color_main, 0.4);
								}
							}
						}
					}
				}
			}

			.VideoPlayer_progress_container {
				display: flex;
				align-items: center;
				gap: 5px;
				padding: 8px 0;
				margin-top: -5px;

				.VideoPlayer_time_current,
				.VideoPlayer_time_total {
					font-size: $fontSize_small;
					color: #666;
					width: 42px;
					text-align: center;
					font-variant-numeric: tabular-nums;
					user-select: none;
					font-weight: 500;
				}

				.VideoPlayer_progress_bar {
					flex: 1;
					height: 3px;
					background-color: rgba(#e5e7eb, 0.8);
					border-radius: 4px;
					position: relative;
					cursor: pointer;
					transition: $custom_transition;
					margin: 0 4px;

					&::before {
						content: '';
						position: absolute;
						top: -8px;
						left: -4px;
						right: -4px;
						bottom: -8px;
						z-index: 0;
					}

					&:hover,
					&.dragging {
						height: 5px;
					}

					// 已播放区域
					.VideoPlayer_progress_completed {
						position: absolute;
						left: 0;
						top: 0;
						height: 100%;
						background-color: $color_main;
						border-radius: 4px;
						transition: width 0.1s ease;
						z-index: 2;

						// 拖动手柄
						.VideoPlayer_progress_handle {
							position: absolute;
							right: -5px;
							top: 50%;
							transform: translate(0, -50%) scale(0);
							width: 10px;
							height: 10px;
							border-radius: 50%;
							background: white;
							box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
							opacity: 0;
							transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275),
								opacity 0.2s ease,
								box-shadow 0.2s ease;
							z-index: 3;
						}
					}

					&:hover {
						.VideoPlayer_progress_completed {
							.VideoPlayer_progress_handle {
								transform: translate(0, -50%) scale(1);
								opacity: 1;
							}
						}
					}

					&.dragging {
						.VideoPlayer_progress_completed {
							background-color: darken($color_main, 5%);

							.VideoPlayer_progress_handle {
								transform: translate(0, -50%) scale(1.2);
								opacity: 1;
								box-shadow: 0 0 6px rgba($color_main, 0.6);
							}
						}
					}
				}
			}
		}

		.VideoPlayer_buttons_container {
			@include flexCenter;
            .VideoPlayer_playlist_button {
                cursor: pointer;
                padding: 8px;
                color: #666;
                @include buttonInteraction;
                border-radius: 50%;
                width: 40px;
                height: 40px;
                @include flexCenter;
                
                &:hover {
                    background-color: rgba($color_main, 0.1);
                }
                
                &:active {
                    background-color: rgba($color_main, 0.2);
                }

				// 播放列表按钮样式增强
				&.active {
					color: $color_main !important;
					background-color: rgba($color_main, 0.1);
				}
            }
		}
	}
}

// 播放列表面板
.VideoPlayer_playlist {
    position: fixed;
    right: -280px; // 初始位置在屏幕外
    top: 100px;
    width: 260px;
    height: calc(100vh - 200px);
    max-height: 500px;
    background: white;
    border-radius: $borderRadius;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    transition: right 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 1000;
    overflow: hidden;
    min-width: 250px;
    min-height: 300px;
    
    &.VideoPlayer_playlist_open {
        right: 20px;
    }
    
    // 播放列表标题栏
    .VideoPlayer_playlist_header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 15px;
        border-bottom: 1px solid #f0f0f0;
        
        .VideoPlayer_playlist_title {
            margin: 0;
            font-size: $fontSize;
            font-weight: 500;
            color: #333;
            user-select: none;
            span {
                color: #666;
                font-size: $fontSize_small;
                font-weight: normal;
                margin-left: 5px;
            }
        }
        
        .VideoPlayer_playlist_close_btn {
            @include buttonInteraction;
            background: none;
            border: none;
            cursor: pointer;
            color: #666;
            padding: 4px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            
            &:hover {
                background-color: rgba(0, 0, 0, 0.05);
            }
        }
    }

	// 列表项容器
	.VideoPlayer_playlist_items{
		flex: 1;
		overflow-y: auto;
        padding: 0;

		// 滚动条样式
        &::-webkit-scrollbar {
            width: 4px;
        }
        
        &::-webkit-scrollbar-track {
            background: #f5f5f5;
        }
        
        &::-webkit-scrollbar-thumb {
            background: #e0e0e0;
            border-radius: 4px;
        }
        
        &::-webkit-scrollbar-thumb:hover {
            background: #d0d0d0;
        }

		// 列表为空时的提示
        .VideoPlayer_playlist_empty {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 200px;
            padding: 20px;
            
            .VideoPlayer_playlist_empty_text {
                color: #999;
                margin-bottom: 15px;
            }
        }

		// 单个列表项
		.VideoPlayer_playlist_item {
            display: flex;
            align-items: center;
            padding: 10px 15px;
            cursor: pointer;
            border-bottom: 1px solid #f9f9f9;
            transition: background-color 0.2s ease;
            
            &:hover {
                background-color: #f9f9f9;
            }
            
            &.VideoPlayer_playlist_item_playing {
                background-color: rgba($color_main, 0.05);
                
                .VideoPlayer_playlist_item_title {
                    color: $color_main;
                    font-weight: 500;
                }
            }
            // 歌曲信息
            .VideoPlayer_playlist_item_info {
                flex: 1;
                min-width: 0; // 解决子元素无法正常应用text-overflow的问题
                
                .VideoPlayer_playlist_item_title {
                    @include forbiddenSelect;
                    @include textEllipsis;
                    font-size: $fontSize_small;
                    color: #333;
                    margin-bottom: 4px;
                }
            }
            
            //  歌曲移除按钮
            .VideoPlayer_playlist_remove_btn {
                @include forbiddenSelect;
                $remove_btn_size: 24px;
                width: $remove_btn_size;
                height: $remove_btn_size;
                background: none;
                border: none;
                color: #ccc;
                font-size: 14px;
                cursor: pointer;
                opacity: 0;
                transition: all 0.2s ease;
                padding: 10px;
                border-radius: 50%;
                display: flex;
                flex: 0 0 auto;
                align-items: center;
                justify-content: center;
                margin-left: 5px;
                &:hover {
                    color: #ff4d4f;
                    background-color: rgba(#ff4d4f, 0.1);
                }
            }
            
            &:hover {
                .VideoPlayer_playlist_remove_btn {
                    opacity: 1;
                }
            }
        }
	}

	// 底部操作区
    .VideoPlayer_playlist_footer {
        padding: 12px;
        border-top: 1px solid #f0f0f0;
        text-align: center;
    }
    
    // 添加视频按钮
    .VideoPlayer_playlist_add_btn {
        @include customButtonBasic;
    }
}
